<template>
  <div>
    <input placeholder="输入关键字搜索" v-model="inputfn" />
    <table class="my-table">
      <thead>
        <tr>
          <th>就诊日期</th>
          <th>医生姓名</th>
          <th>诊断结果</th>
          <th>处方信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <ListZuJian
        v-for="item in realList"
        :key="item.id"
        :id="item.id"
        :name="item.name"
        :time="item.time"
        :illness="item.illness"
        :drug="item.drug"
        @clickfn="clickfn"
      />
      <Details v-if="isShow" :list="list" :isId="isId" @delfn="delfn" />
    </table>
  </div>
</template>
<script>
import ListZuJian from './components/01.ListZuJian.vue'
import Details from './components/02.Details.vue'
export default {
  data() {
    return {
      list: [
        {
          id: '1',
          time: '2020-12-12',
          name: '张三',
          illness: '感冒',
          drug: '感冒药',
        },
        {
          id: '2',
          time: '2020-10-11',
          name: '强子',
          illness: '肾亏',
          drug: '六味地黄丸',
        },
        {
          id: '3',
          time: '2020-09-21',
          name: '严万强',
          illness: '肾衰',
          drug: '八味地黄丸',
        },
      ],
      isShow: false,
      isId: '',
      inputfn: '',
    }
  },
  computed: {
    realList() {
      return this.list.filter(
        (ele) => JSON.stringify(Object.values(ele)).indexOf(this.inputfn) != -1
      )
    },
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    clickfn(id) {
      this.isId = id
      this.isShow = true
      // console.log(id);
    },
    delfn() {
      this.isShow = false
    },
    keyfn(na) {
      this.list = this.list.filter((ele) => ele.name == na)
    },
  },
  components: {
    ListZuJian,
    Details,
  },
}
</script>

<style>
.my-table {
  border-collapse: collapse;
  width: 100%;
}

.my-table td,
.my-table th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.my-table th {
  background-color: #f2f2f2;
}
</style>
